<template>
	<el-dialog
		v-model="visible"
		:title="mode === 'add' ? '新增书籍' : '编辑书籍'"
		width="500"
		:before-close="handleClose"
	>
		<el-form
			ref="formRef"
			:model="formData"
			:rules="rules"
			label-width="100px"
			v-loading="loading"
		>
			<el-form-item label="书名" prop="name">
				<el-input
					v-model="formData.name"
					:disabled="disabledFields.includes('name')"
				/>
			</el-form-item>
			<el-form-item label="作者" prop="author">
				<el-input
					v-model="formData.author"
					:disabled="disabledFields.includes('author')"
				/>
			</el-form-item>
			<el-form-item label="价格" prop="price">
				<el-input
					v-model="formData.price"
					type="number"
					:disabled="disabledFields.includes('price')"
				/>
			</el-form-item>
			
			<!-- 封面上传 -->
			<el-form-item label="封面图">
				<el-upload
					class="avatar-uploader"
					action="http://localhost:8083/files/upload"
					:show-file-list="false"
					@success="handleUploadSuccess"
				>
					<img
						v-if="formData.img"
						:src="formData.img"
						class="avatar"
					/>
					<el-icon v-else class="avatar-uploader-icon"
					><Plus /></el-icon
					>
				</el-upload>
			</el-form-item>
		</el-form>
		
		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="submit">提交</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps({
	dialogFormVisible: Boolean,
	mode: { type: String, default: 'add' },
	form: { type: Object, default: () => ({}) },
	disabledFields: { type: Array, default: () => [] }
})
const emits = defineEmits(['close:dialogVisible', 'submit-success'])

const visible = ref(false)
const loading = ref(false)
const formRef = ref()

// 表单数据
const formData = reactive({
	name: '',
	author: '',
	price: '',
	img: ''
})

// 校验规则
const rules = {
	name: [{ required: true, message: '请输入书名', trigger: 'blur' }],
	author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
	price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
}

// 深拷贝工具（简单版）
function deepClone(obj) {
	return JSON.parse(JSON.stringify(obj))
}

// 监听弹窗显示及表单数据变化，打开时初始化formData（深拷贝）
watch(
	() => props.dialogFormVisible,
	(val) => {
		visible.value = val
		if (val) {
			Object.assign(formData, deepClone(props.form))
		}
	}
)

// 上传成功回调
const handleUploadSuccess = (res) => {
	formData.img = res.data
	ElMessage.success('上传成功')
}

// 关闭弹窗
const handleClose = () => {
	formRef.value?.resetFields()
	// 清空图片数据
	formData.img = ''
	// 通知父组件关闭弹窗
	emits('close:dialogVisible', false)
}

// 表单提交
const submit = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			emits('submit-success', { ...formData, mode: props.mode })
		}
	})
}
</script>

<style scoped>
.avatar-uploader {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
	position: relative;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
}

.avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
</style>
